﻿@{
    ViewBag.Title = "会员购物品类分析";
}

@section headSection{
    <link href="/jedate/skin/gray.css" rel="stylesheet" />
    <script src="/jedate/jedate.js"></script>
    <!-- 引入 echarts.js -->
    <script src="/Scripts/echarts.js"></script>
    <script src="/Scripts/macarons.js"></script>
}
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div style="width: 100%; height: 100px; margin:0 auto; ">
    @using (Ajax.BeginForm(new AjaxOptions() { OnBegin = "begin", OnComplete = "complete" }))
    {
        <table style="margin:10px auto;">
            <tr>
                <td rowspan="2"><span style="font-size:24px; ">时间区间：</span> </td>
                <td>
                    始:<input class="startdate" id="startdate" name="startdate" type="text" value="2010-01-01 00:00:00" placeholder="请选择" style="color:blue">

                </td>
            </tr>
            <tr>
                <td>
                    终:<input class="enddate" id="enddate" name="enddate" type="text" placeholder="请选择" value="2017-01-01 00:00:00" style="color:blue ">
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    @Html.DropDownList("category", MMS.UI.Helper.EnumHelper.Category.DDLData)
                    <input id="less" name="less" type="text" placeholder="不小于" value="0" style="color: blue ;width:50px" />
                    <input id="greater" name="greater" type="text" placeholder="不大于" value="10000" style="color: blue; width: 50px" />
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <input type="submit" value="查询" />
                </td>
            </tr>
        </table>
    }
</div>
<div id="main" style="width:100%; height:355px; margin: 0 auto;"></div>


<script type="text/javascript">

    jeDate({
        dateCell: "#startdate",
        format: "YYYY-MM-DD hh:mm:ss",
        isinitVal:false,
        isTime: true, //isClear:false,
        minDate: "0000-00-00 00:00:00"
    })
    jeDate({
        dateCell: "#enddate",
        format: "YYYY-MM-DD hh:mm:ss",
        isinitVal: false,
        isTime: true, //isClear:false,
        minDate: "0000-00-00 00:00:00"
    })
</script>
<script type="text/javascript">
    //品类名称
    var dataName = [];
    //数量
    var dataData = [];


    function getdata(jsonText) {


        if (typeof (jsonText) == "string") {
            //msgObj = JSON.parse(jsonText);
            try {
                //1.1将字符串 尝试转成 js 对象
                //处理 数组字面量表示法的 json字符串：[{},{}]
                jsonText = eval(jsonText);
            } catch (e) {
                try {
                    //处理 对象字面量表示法的 json字符串:{}
                    jsonText = eval("(" + jsonText + ")");
                } catch (e1) {
                    alert("格式错误：必须为json格式字符串~！");
                }
            }
        }

        for (var i = 0; i < jsonText.length; i++) {
            dataName[i] = jsonText[i].CategoryName;
            dataData[i] = { value: jsonText[i].Number, name: jsonText[i].CategoryName };
        }

        myChart.setOption({
            legend: {
                data: dataName
            },
            series: {
                data: dataData
            }
        });

    }

    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'), 'macarons');

    // 显示标题，图例和空的坐标轴
    myChart.setOption({

        title: {
            text: '会员购物品类分析',
            left: 30,
            top: 30,
            textStyle: { fontSize: 20 }

        },
        legend: {
            x: 'center',
            y: 'bottom',
            data: null
        },
        tooltip: {
            trigger: 'item',
            //{a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            formatter: "品类名称:{b}<br/>销售量:{c},占({d}%)"
        },
        toolbox: {
            show: true,
            feature: {
                mark: { show: true },
                dataView: { show: true, readOnly: false },
                magicType: {
                    show: true,
                    type: ['pie', 'funnel']
                },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        series: [
            {
                name: '品类销售',
                type: 'pie',
                radius: '80%',
                center: ['50%', '45%'],
                data: null
            }
        ]
    });

    getdata(@Html.Raw(ViewBag.Data));


    function begin() {
        //简单的加载动画
        myChart.showLoading();
    }
    function complete(xhrObj) {
        //隐藏加载动画。
        myChart.hideLoading();
        getdata(xhrObj.responseText);

    }

</script>
